<template>
  <div>
    <div>
      <el-select
        v-model="zone_id"
        style="width: 120px"
        placeholder="选择分区"
        :clearable="true"
        @change="changeZone"
      >
        <el-option
          v-for="item in zoneList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="site_id"
        style="width: 120px"
        placeholder="选择位置"
        :clearable="true"
        @change="changeSite"
      >
        <el-option
          v-for="item in siteList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="online"
        style="width: 120px"
        placeholder="是否在线"
        :clearable="true"
        @change="changeOnline"
      >
        <el-option
          v-for="item in isOnlineList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="word" :clearable="true" style="width: 200px" placeholder="账号/名字/职业关键字" @change="changeKeyword" />
      <el-input v-model="minLevel" :clearable="true" style="width: 80px; margin-left: 10px" @change="changeMinLevel" />
      <span> ≤ 人物等级 ≤ </span>
      <el-input v-model="maxLevel" :clearable="true" style="width: 80px" @change="changeMaxLevel" />
      <el-input v-model="minMoney" :clearable="true" style="width: 80px; margin-left: 10px" @change="changeMinMoney" />
      <span> ≤ 金币(万) ≤ </span>
      <el-input v-model="maxMoney" :clearable="true" style="width: 80px" @change="changeMaxMoney" />
      <el-input v-model="goods_word" :clearable="true" style="width: 150px; margin-left: 10px" placeholder="物品名称" @change="changeGoodsKeyword" />
      <el-input v-model="pet_word" :clearable="true" style="width: 150px; margin-left: 10px" placeholder="宠物名称" @change="changePetKeyword" />
      <el-input v-model="petMinLevel" :clearable="true" style="width: 80px" @change="changePetMinLevel" />
      <span> ≤ 宠物等级 ≤ </span>
      <el-input v-model="petMaxLevel" :clearable="true" style="width: 80px" @change="changePetMaxLevel" />
      <el-input v-model="skill_word" :clearable="true" style="width: 150px; margin-left: 10px" placeholder="技能名称" @change="changeSkillKeyword" />
      <el-input v-model="skillMinLevel" :clearable="true" style="width: 80px" @change="changeSkillMinLevel" />
      <span> ≤ 技能等级 ≤ </span>
      <el-input v-model="skillMaxLevel" :clearable="true" style="width: 80px" @change="changeSkillMaxLevel" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserFilter',
  props: {
    keyword: {
      type: String,
      default: null
    },
    goods_keyword: {
      type: String,
      default: null
    },
    pet_keyword: {
      type: String,
      default: null
    },
    zone: {
      type: String,
      default: null
    },
    site: {
      type: String,
      default: null
    },
    is_online: {
      type: String,
      default: null
    },
    min_level: {
      type: String,
      default: null
    },
    max_level: {
      type: String,
      default: null
    },
    min_money: {
      type: String,
      default: null
    },
    max_money: {
      type: String,
      default: null
    },
    pet_min_level: {
      type: String,
      default: null
    },
    pet_max_level: {
      type: String,
      default: null
    },
    skill_keyword: {
      type: String,
      default: null
    },
    skill_min_level: {
      type: String,
      default: null
    },
    skill_max_level: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      workStatusList: [
        { name: '有工作', value: '1' },
        { name: '无工作', value: '0' }
      ],
      zoneList: [
        { name: '网通', value: '40' },
        { name: '电信', value: '4' }
      ],
      siteList: [
        { name: '左', value: '1' },
        { name: '右', value: '2' }
      ],
      isOnlineList: [
        { name: '在线', value: 1 },
        { name: '离线', value: 0 }
      ],
      zone_id: this.zone,
      site_id: this.site,
      online: this.is_online,
      word: this.keyword,
      goods_word: this.goods_keyword,
      pet_word: this.pet_keyword,
      minLevel: this.min_level,
      maxLevel: this.max_level,
      minMoney: this.min_money,
      maxMoney: this.max_money,
      petMinLevel: this.pet_min_level,
      petMaxLevel: this.pet_max_level,
      skill_word: this.skill_keyword,
      skillMinLevel: this.skill_min_level,
      skillMaxLevel: this.skill_max_level
    }
  },
  watch: {
    min_money: function() {
      this.minMoney = this.min_money
    },
    max_money: function() {
      this.maxMoney = this.max_money
    },
    min_level: function() {
      this.minLevel = this.min_level
    },
    max_level: function() {
      this.maxLevel = this.max_level
    },
    pet_min_level: function() {
      this.petMinLevel = this.pet_min_level
    },
    pet_max_level: function() {
      this.petMaxLevel = this.pet_max_level
    },
    zone: function() {
      this.zone_id = this.zone
    },
    site: function() {
      this.site_id = this.site
    },
    keyword: function() {
      this.word = this.keyword
    },
    goods_keyword: function() {
      this.goods_word = this.goods_keyword
    },
    pet_keyword: function() {
      this.pet_word = this.pet_keyword
    },
    skill_keyword: function() {
      this.skill_word = this.skill_keyword
    },
    skill_min_level: function() {
      this.skillMinLevel = this.skill_min_level
    },
    skill_max_level: function() {
      this.skillMaxLevel = this.skill_max_level
    }
  },
  methods: {
    changeMinMoney() {
      this.$emit('update:min_money', this.minMoney)
      this.$emit('success')
    },
    changeMaxMoney() {
      this.$emit('update:max_money', this.maxMoney)
      this.$emit('success')
    },
    changeMinLevel() {
      this.$emit('update:min_level', this.minLevel)
      this.$emit('success')
    },
    changeMaxLevel() {
      this.$emit('update:max_level', this.maxLevel)
      this.$emit('success')
    },
    changePetMinLevel() {
      this.$emit('update:pet_min_level', this.petMinLevel)
      this.$emit('success')
    },
    changePetMaxLevel() {
      this.$emit('update:pet_max_level', this.petMaxLevel)
      this.$emit('success')
    },
    changeZone() {
      this.$emit('update:zone', this.zone_id)
      this.$emit('success')
    },
    changeKeyword() {
      this.$emit('update:keyword', this.word)
      this.$emit('success')
    },
    changeGoodsKeyword() {
      this.$emit('update:goods_keyword', this.goods_word)
      this.$emit('success')
    },
    changePetKeyword() {
      this.$emit('update:pet_keyword', this.pet_word)
      this.$emit('success')
    },
    changeSite() {
      this.$emit('update:site', this.site_id)
      this.$emit('success')
    },
    changeOnline() {
      this.$emit('update:is_online', this.online)
      this.$emit('success')
    },
    changeSkillKeyword() {
      this.$emit('update:skill_keyword', this.skill_word)
      this.$emit('success')
    },
    changeSkillMinLevel() {
      this.$emit('update:skill_min_level', this.skillMinLevel)
      this.$emit('success')
    },
    changeSkillMaxLevel() {
      this.$emit('update:skill_max_level', this.skillMaxLevel)
      this.$emit('success')
    }
  }
}
</script>
